<template>
  <div class="doge-code-editor-toolbar">
    <div class="doge-code-editor-toolbar-left">
      <slot name="left"></slot>
      <el-button size="small" class="doge-code-editor-toolbar-left-button" v-for="tool in tools" :key="tool.name" @click="handleToolClick(tool.name)">{{ tool.label }}</el-button>
    </div>
    <div class="doge-code-editor-toolbar-right">
      <slot name="right-tools"></slot>
      <el-button :primary="tool.primary" :icon="tool.icon" size="small" class="doge-code-editor-toolbar-right-button" v-for="tool in toolsRight" :key="tool.name" @click="handleToolClick(tool.name)">{{ tool.label }}</el-button>
    </div>
  </div>
</template>

<script setup>

const emit = defineEmits(["tool-click"]);

const tools = [
]

const toolsRight = [
  {
    "name": "chat",
    "label": "Chat",
    "primary": true
  }
]

function handleToolClick (tool) {
  if (tool) {
    emit("tool-click", tool)
  }
}

</script>


<style scoped>


.doge-code-editor-toolbar {
  height: 3em;
  display: flex;
  flex-direction: row;
  padding: 0.5em 2em;
}

.doge-code-editor-toolbar-left {
  flex: 1;
}

</style>